<template>
    <div id="page-container">
        <div class="head-container">
            <img :src="columnCoverUrl" class="head-cover">
            <div class="head-title">
                <h1>{{columnTitle}}</h1>
            </div>
        </div>
        <div class="article-holder" v-html="columnRawHtml"></div>
        <div></div>

    </div>
</template>

<script>
import axios from 'axios';
import router from 'vue-router'
export default {
    created(){
    },
    mounted(){
        this.articleId = this.$route.params.id
        console.log(this.articleId)
        this.getArticleInfo()
    },
    data(){
        return{
            articleId:'',
            columnCoverUrl:'',
            columnTitle:'',
            columnRawHtml:'',
            articleInfo:[]
        }
    },
    methods:{
        getArticleInfo(){
            axios.post('http://localhost:8080/column/selectColumnInfo',{"articleId":this.articleId}).then((res=>{
                console.log(res)
                console.log(res.data)
                this.articleInfo = res.data
                console.log(this.articleInfo)
                this.columnCoverUrl = 'http://localhost:8080/uploadfilecover/uploadcolumncover/'+this.articleInfo.articleCover
                this.columnTitle = this.articleInfo.articleTitle
                this.columnRawHtml = this.articleInfo.articleContent
            }))
        }
    }
}
</script>

<style scoped>
#page-container{
    margin: 0 auto;
    width: 80%;
    height: 100%;
}
.head-container{
    margin: 0 auto;
    width: 80%;
    height: 400px;
    text-align: center;
}
.head-cover{
    margin: 0 auto;
    /* width: 70%;
    height: 85%; */
    width: 680px;
    height: 340px;
    border: 5px;
    border-radius:4px; 
    background-size:cover; 
}
.head-title{
    margin: 0 auto;
    width: 90%;
    height: 15%; 
}
.article-holder{
    margin: 0 auto;
    width: 60%;
    height: 100%;
}
</style>